<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标</title>
</head>
<body>
    <div>
        <p>我们经常会用到一些图标。但这我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越来越慢。所有，我们需要使用字体图标的方式显示图标，既解决了失真的问题，也解决了图片占用资源的问题。</p>
        <p>常用字体图标库：阿里字体图标库。https://iconfont.cn/</p>
        <p>优点: <br>1、轻量性：加载速度快，减少 http 请求。</p>
        <p>2、灵活性：可以利用 CSS设置大小颜色等。</p>
        <p>3、兼容性：兼容性好。</p>
        <p>字体图标的使用：</p>
        <p>1、注册并登录账号 https://iconfont.cn/</p>
        <p>2、选择图标或搜索图标</p>
        <p>3、添加购物车</p>
        <p>4、下载代码</p>
        <p>5、选择 font-class 引用。</p>
        <p>使用格式：<br>class="iconfont icon-xxx 其它类名"</p>
        <p>其中，在使用字体图标时，前面一定要有 iconfont，这是固定组合； icon-xxx 是图标名称，其它类名可以不写。</p>
        <p>也可以使用其它类进行设置图标的样式，设置方法更设置文字是一样的，因为它本身就是文本属性。</p>
        <p>6、在需要使用图标的地方，添加 class="iconfont icon-xxx 其它类名" 即可。</p>
    </div>
</body>
</html>